<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue模板语法示例</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>普通文本</h3>
			<div>
				{{msg}}
			</div>
			<hr>
			
			<h3>输出HTML源代码</h3>
			<div>{{code}}</div>
			<hr>
			
			<h3>正常渲染HTML代码</h3>
			<div v-html="code"></div>
			<hr>
			
			
			<h3>给标签动态绑定属性</h3>
			<div v-bind:name="attrName" v-bind:aa="attrAa" v-bind:booleanAttr="attrBoolean">绑定属性演示</div> <br />
			<div :name="attrName" :aa="attrAa" :booleanAttr="attrBoolean">绑定属性演示(缩写语法)</div>
			<hr>
			
			<h3>在文本、属性中使用表达式</h3>
			<div v-bind:name="attrName+',通过表达式拼接的内容'">{{msg + ',我是通过表达式拼接在数据上的'}}</div>
			
			<h3>指令</h3>
			<h4>不带参数的指令</h4>
			<div style="height: 20px;">
			<p v-if="second % 2 == 0">只有当前是偶数秒时我才显示</p>
			</div>
			<h4>带参数的指令</h4>
			<button v-on:click="clickHandler" v-text="testBtnText"></button>
			<h4>带动态参数的指令</h4>
			<button v-on:[eventName]="clickHandler" v-text="testBtnText2"></button>
			<h4>带修饰符参数的指令</h4>
			<a href="https://www.baidu.com" v-on:click.prevent="clickHandler" target="_blank">百度一下，你也跳不过去</a> <br>
			<a href="https://www.baidu.com" @click.prevent="clickHandler" target="_blank">百度一下，你也跳不过去(缩写语法)</a>
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el: '#app',
			data: {
				msg: 'Hello Vue!',
				code: '<p style="color:blue;">这是一段HTML代码</p>',
				attrName: '通过Vue设置的属性值',
				attrAa: '通过Vue设置非标准属性值',
				attrBoolean: null,
				second: new Date().getSeconds(),
				testBtnText: '测试按钮',
				testBtnText2: '测试按钮2',
				eventname: 'click'
			},
			created: function(){
				setInterval(() => {
					this.second = new Date().getSeconds();
				}, 1000);
			},
			methods:{
				clickHandler:function(){
					alert('点击了按钮');
				}
			}
		});
	</script>
</html>
